<template>
    <div class="msglist">
        <van-list
        v-model:loading="loading"
        :finished="finished"
        @load="onLoad"
        direction="up"
    >
    <div  v-for="(item,index) in list" :key="index">
        <van-row justify="end" :gutter="10" class="row" v-if="item.sendid==send.id">
            <van-col class="right">
                <div>{{send.nickname}}</div>
                <van-text-ellipsis
                    :rows="3"
                    :content="item.content"
                    expand-text="展开"
                    collapse-text="收起"
                />
            </van-col>
            <van-col span="4">
                <van-image
                    round
                    width="3rem"
                    height="3rem"
                    :src="send.avatar_text"
                />
            </van-col>
          </van-row>
          <van-row :gutter="10" class="row" v-else>
            <van-col span="4">
                <van-image
                    round
                    width="3rem"
                    height="3rem"
                    :src="receive.avatar_text"
                />
            </van-col>
            <van-col class="left">
                <div>{{receive.nickname}}</div>
                <van-text-ellipsis
                    :rows="3"
                    :content="item.content"
                    expand-text="展开"
                    collapse-text="收起"
                />
            </van-col>
          </van-row>
    </div>
          
    </van-list>
    </div>
        <van-form @submit="sendMsg">
            <van-cell-group inset>
                <van-field v-model="msg">
                    <template #button>
                        <van-space>
                            <van-button size="small" type="primary" native-type="submit">发送</van-button>
                        </van-space>
                    </template>
                </van-field>
            </van-cell-group>
        </van-form>
</template>

<script setup>
import { onBeforeMount } from "vue"

    const {proxy} = getCurrentInstance()
    const send = proxy.$business
    const receiveid = proxy.$route.query.receiveid ?? 0
    const receive = ref({})
    const msg = ref('')
    const text = ref('')
    onBeforeMount(()=>{
        proxy.$connect(`ws://ws.zx.sleep-888.com/ws?sendid=${send.value.id}`);
        // proxy.$connect(`ws://127.0.0.1:13695?sendid=${send.value.id}`);
    })
    onMounted(()=>{
        if(!getReceive())return;
        proxy.$socketStore.SOCKET_ONOPEN()
        proxy.$socket.onmessage = (e)=>{
            list.value.push({
                sendid:receiveid,
                receiveid:send.value.id,
                content:e.data,
            })
            proxy.$nextTick(function(){
                let msglist = document.getElementsByClassName('msglist')[0]
                msglist.scrollTop = msglist.scrollHeight;
            })
        }
    })
    const getReceive = async()=>{
        let result = await  proxy.$GET({
            url:'/business/receive',
            params:{
                receiveid
            }
        })
        if(!result.code){
            proxy.$router.push('/')
            return false
        }
        receive.value = result.data
        return true
    }
    const sendMsg = ()=>{
        list.value.push({
            sendid:send.value.id,
            receiveid:receiveid,
            content:msg.value,
        })
        proxy.$nextTick(function(){
            let msglist = document.getElementsByClassName('msglist')[0]
            msglist.scrollTop = msglist.scrollHeight;
        })
        let msgData = {
            code:1,
            sendid:send.value.id,
            receiveid,
            content:msg.value,
        }
        proxy.$socket.sendObj(msgData);
        msg.value = ''
    }
    onUnmounted(()=>{
        proxy.$socketStore.SOCKET_ONCLOSE()
        proxy.$disconnect();
    })
    const list = ref([])
    const loading = ref(false)
    const finished = ref(false)
    const page = ref(1)
    let isfirst = true

    const onLoad = async() => {
        let result = await proxy.$GET({
            url:'/chat/chat',
            params:{
                sendid:send.value.id,
                receiveid,
                page:page.value
            }
        })
        if(result)
        {
            list.value = result.data.reverse().concat(list.value)
            loading.value = false
            finished.value = !result.has_more
            if(result.has_more)  page.value++
            if(isfirst){
                isfirst = false
                proxy.$nextTick(function(){
                    let msglist = document.getElementsByClassName('msglist')[0]
                    msglist.scrollTop = msglist.scrollHeight;
                })
            }
        }
    };
</script>

<style scoped>
    .msglist{
        height: 90%;
        overflow:scroll;
    }
    .van-text-ellipsis{
        background-color: rgb(32, 192, 255);
        color: white;
        border-radius: 3px;
        max-width: 180px;
        /* word-wrap: break-word; */
        word-break:break-word;
        display: table;
        padding: 8px;
        font-size: 16px;
    }
    .right{
        display: flex;
        flex-direction:column;
        align-items:flex-end;
    }
    .left{
        display: flex;
        flex-direction:column;
        align-items:flex-start;
    }
    .row{
        margin: 20px 10px;
    }
</style>